<template>
	<view>
		<!-- 申诉说明 -->
		<view class="textbox flex jb ac">
			<view class="text-text">当局有故障的，可申诉补偿。但滥用申诉功能将会减少申诉的局数哦</view>
			<view class="text-boder" @click="appealbuttom">申诉记录</view>
		</view>
		<!-- 记录商品 -->
		<view class="listbox">
			<view v-for="(item,index) in arrlist" class="listview flex ac" @click="detaileddata(item.id)">
				<view class="list-image">
					<image :src="item.main_picture"></image>
				</view>
				<view class="list-border flex ac" style="flex: 1;">
					<view style="flex: 1;">
						<view class="list-title">{{item.name}}</view>
						<view class="list-time">{{item.create_time}}</view>
					</view>
					<view class="listtea flex ac">
						<view>{{item.result==false?'未抓中':'抓中'}}</view>
						<image style="width: 50rpx;" mode="widthFix" src="../../static/icon/right1.png"></image>
					</view>
				</view>
			</view>
		</view>

		<!-- 上拉加载数据 -->
		<view class="loadmore">
			<view v-if="load" class="loading-more">
				<view class="more-bottom-line" style="display: flex;">
					<view class="more-loading"></view>
					<text class="more-lineTxt">正在加载...</text>
				</view>
			</view>
			<view v-if="nomore==false" class="more-finish">
				<view class="more-bottom-line">
					<view class="more-line"></view>
					<text class="more-lineTxt">暂无更多了~</text>
					<view class="more-line"></view>
				</view>
			</view>
		</view>

		<!-- 暂无数据 -->
		<view v-if="nodata==true" class="nodatabox">
			<image style="width:279rpx;" mode="widthFix" src="../../static/currently.png">
			</image>
			<view class="nodatatext">暂无消息</view>
		</view>

		<!-- <view class="empty">没有更多数据了~</view> -->

	</view>
</template>

<script>
	import {
		request
	} from "@/static/common.js";
	export default {
		data() {
			return {
				arrlist: [],
				pageIndex: 1,
				load: true,
				nomore: true,
				nodata: false,
				hasMore: false,
			}
		},

		onLoad() {
			this.gamerecord()
		},

		onShow(e) {
			var that = this
			if (uni.getStorageSync("update_quedindel")) {
				this.pageIndex = 1
				this.arrlist = []
				that.gamerecord()
				uni.removeStorageSync('update_quedindel')
			}
		},

		// 上拉触底事件
		onReachBottom: function() {
			var that = this
			if (that.hasMore) {
				that.gamerecord() //调用函数
			}
		},

		methods: {
			async gamerecord(e) {
				let apply = await request(`${getApp().globalData.http}user/game_record`, {
					'X-Requested-With': 'XMLHttpRequest',
					'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
				}, "GET", {
					token: getApp().globalData.token,
					page_num: this.pageIndex,
					page_size: 13,
					result: 1,
				})
				if (apply.data.code == 0) {
					this.arrlist = this.arrlist.concat(apply.data.data)
					// 上拉加载数据
					if (apply.data.page_num == apply.data.total_num) {
						this.hasMore = false
					} else {
						this.hasMore = true
					}
					if (apply.data.data.length == 0) {
						this.nomore = true
						this.nodata = true
					}
					if (apply.data.data.length !== 0) {
						this.nomore = true
						this.nodata = false
					}
					if (this.hasMore) {
						this.pageIndex = this.pageIndex + 1
					} else {
						this.load = false
						if (apply.data.data.length == 0) {
							this.nomore = true
						} else {
							this.nomore = false
						}
					}
				}
			},

			detaileddata(e) {
				var id = e
				uni.navigateTo({
					url: '/pages/appeal/appeal?id=' + id
				})
			},

			appealbuttom(e) {
				uni.navigateTo({
					url: '/pages/appealrecord/appealrecord'
				})
			},

		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #F8FAFC;
	}

	// 申诉说明
	.textbox {
		padding: 0 20rpx;
	}

	.text-text {
		width: 530rpx;
		font-size: 25rpx;
		color: #555;
	}

	.text-boder {
		width: 120rpx;
		height: 50rpx;
		line-height: 50rpx;
		text-align: center;
		font-size: 25rpx;
		color: #454545;
		border: 1px solid #E7E7E7;
		border-radius: 30rpx;
	}

	// 记录商品
	.listbox {
		padding-left: 20rpx;
	}

	.list-image {
		width: 120rpx;
		height: 120rpx;
		margin-right: 20rpx;
	}

	.list-image image {
		width: 100%;
		height: 100%;
		border-radius: 10rpx;
	}

	.list-title {
		font-size: 30rpx;
		font-weight: 700;
		margin-bottom: 20rpx;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
	}

	.list-time {
		font-size: 25rpx;
		color: #686868;
	}

	.list-border {
		padding: 50rpx 0;
		border-bottom: 1px solid #E5E7E9;
	}

	.listtea {
		margin-right: 20rpx;
		color: #b5b5b5;
		font-size: 28rpx;
		margin-left: 10rpx;
	}

	.empty {
		width: 100%;
		height: 100rpx;
		line-height: 100rpx;
		text-align: center;
		font-size: 28rpx;
		color: #969799;
	}

	// 暂无数据
	.nodatabox {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		margin-top: 188rpx;
	}

	.nodatatext {
		font-size: 28rpx;
		color: #909090;
		margin: 20rpx 0;
	}
</style>